<template>
  <div>
    <a-breadcrumb :style="{ margin: '16px 0' }">
      <a-breadcrumb-item>
        <router-link to="/">首页</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/case">案例库</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        {{detail.title}}
      </a-breadcrumb-item>
    </a-breadcrumb>
    <article :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">
      <h2>{{detail.title}}</h2>
      <a-tag color="cyan">{{ detail.caseType }}</a-tag>
      <div v-html="detail.description" style="marginTop:2rem"></div>
    </article>
  </div>
</template>

<script>
import axios from "axios";
import yesapi from "@/components/yesapi.js";
const detail = {};

export default {
  data () {
    return {
      detail
    };
  },
  created: function () {
    this.getDetail();
  },
  methods: {
    //http://hn216.api.yesapi.cn/?s=App.Table.Get&model_name=WritingCases&id=2&app_key=5C559705EEC307BDDE4D087D3BE8C926&sign=4F8EA26B8900D3F385BC020B21D7596D
    getDetail () {
      var params = {
        s: "App.Table.Get",
        model_name: "WritingCases",
        id: this.$route.params.id
      };
      var that = this;
      axios({
        method: "get",
        url: yesapi.YESAPI_HOST,
        params: yesapi.encrypt(params)
      })
        .then(function (response) {
          console.log(response["data"]["data"]['data']);
          // 处理逻辑
          that.detail = response["data"]["data"]['data'];
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
};
</script>

<style>
</style>
